.z-card {
  height: 100%;
  display: flex;
  overflow: hidden;
}

@mixin box {
  box-shadow: var(--z-box-shadow);
  border-radius: var(--z-border-radius);
  background-color: var(--z-fill-color-blank);
}

.z-card--options_wrap {
  padding: var(--z-page-padding);
  padding-right: calc(var(--z-page-padding) / 2);
  & + .z-card--wrapper {
    padding-left: calc(var(--z-page-padding) / 2);
  }
}

.z-card--options {
  height: 100%;
  width: var(--z-page-options-width);
  padding: var(--z-page-padding) 0;
  @include box();
}

.z-card--wrapper {
  flex: 1 1 0;
  padding: var(--z-page-padding);
  overflow: hidden;
}

.z-card--content {
  height: 100%;
  display: flex;
  flex-direction: column;

  .card-box {
    @include box();
  }
}
